import React, { Component, Fragment } from 'react'
import { LoginWapper, LoginBox } from './style'
import { connect } from 'react-redux'
import { Navigate } from 'react-router-dom'
import { actionCreators } from './store'
class Login extends Component {
  render() {
    //判断登录的状态，如果用户未登录显示登录组件，已登录显示首页
    if (!this.props.loginStatus) {
      return (
        <Fragment>
          <LoginWapper>
            <LoginBox>
              <input className="InputText" type="text" placeholder="账户" ref={(input) => { this.account = input }} />
              <input className="InputText" type="password" placeholder="密码" ref={(input) => { this.password = input }} />
              <button className="loginBtn" onClick={() => this.props.Login(this.account, this.password)}>登录</button>
            </LoginBox>
          </LoginWapper>
        </Fragment>
      )
    } else {
      return <Navigate to='/' />  //路由重定向到首页
    }
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'loginStatus'])
})

const mapDispatch = (dispatch) => ({
  //点击登录
  Login(account, password) {
    dispatch(actionCreators.loginCheck(account.value, password.value))
  }
})

export default connect(mapState, mapDispatch)(Login)